<template>
  <div class="home">
    <div class="header">
      <div class="logo"></div>
      <div class="titleMain">
        <h1>CAL2150连退炉温动态控制模型</h1>
      </div>
    </div>
    <el-col class="main-container">
      <el-row :gutter="24" style="height: 25vh">
        <el-col :span="10">
          <div>
            <div class="msg-title">重要信息提示</div>
            <div class="information">
              <div>
                <span class="alarm-row-one-line marquee-text">
                  {{ warningInfo }}
                </span>
              </div>
              <!-- <el-carousel autoplay class="h-100% w-100%" direction="vertical" :interval="3000" indicator-position="none">
                <span style="color: transparent !important">{{ warningInfo }}</span>
                <el-carousel-item v-for="item in warningInfo" :key="item" style="color: white">{{ item.value }}</el-carousel-item>
              </el-carousel> -->
            </div>
            <div :class="viewportWidth == 1920 ? 'p-tem-100' : 'p-tem-125'">
              <div>
                <span>&nbsp;P12 ： {{ ptem.p12temp }} &nbsp;&nbsp;|&nbsp;</span>
              </div>
              <div>
                <span>&nbsp;P11 ： {{ ptem.p11temp }} &nbsp;&nbsp;|&nbsp;</span>
              </div>
              <div>
                <span>&nbsp;P10 ： {{ ptem.p10temp }} &nbsp;&nbsp;|&nbsp;</span>
              </div>
              <div>
                <span>&nbsp;P9 ： {{ ptem.p9temp }} &nbsp;&nbsp;|&nbsp;</span>
              </div>
              <div>
                <span>&nbsp;P8 ： {{ ptem.p8temp }} &nbsp;&nbsp;|&nbsp;</span>
              </div>
              <div>
                <span>&nbsp;P6 ： {{ ptem.p6temp }} &nbsp;&nbsp;|&nbsp;</span>
              </div>
              <div>
                <span>&nbsp;P5 ： {{ ptem.p5temp }} &nbsp;&nbsp;|&nbsp;</span>
              </div>
              <div>
                <span>&nbsp;P3 ： {{ ptem.p3temp }} &nbsp;&nbsp;|&nbsp;</span>
              </div>
              <div>
                <span>&nbsp;焊缝距入炉距离 ： {{ ptem.distance }} </span>
              </div>
            </div>
            <div class="svg-clip-wrapper">
              <div class="svg-clip-inner">
                <svg-load :name="technologicalName" />
              </div>
            </div>
            <div :class="viewportWidth === 1920 ? 'dew-point-100' : 'dew-point-125'">
              <!-- <span>{{ dewPoint.chinese }}：</span> -->
              <template v-for="(value, key) in dewPoint" :key="key">
                <div v-if="String(key) !== 'chinese'">
                  <span>&nbsp; {{ key }} ： {{ value }} &nbsp;|</span>
                </div>
              </template>
            </div>
          </div>
        </el-col>
        <el-col :span="14">
          <new-coil-card title="设定信息" class="top-set-info">
            <div class="set-info-card-body" :class="viewportWidth == 1920 ? 'table-cell-class-100' : 'table-cell-class-125'">
              <el-table
                :data="warningTableData"
                style="width: 100%; height: 100%"
                :header-cell-style="{ background: '#2f59af', color: '#fff' }"
                size="small"
                ref="setInfoTableRef"
              >
                <el-table-column prop="chinese" label="炉温" :width="viewportWidth == 1920 ? '140px' : '110px'" />
                <el-table-column prop="furnaceTemperature12" label="1&2" :width="columnWidth(7)">
                  <template #default="scope">
                    <span v-if="scope.$index === 4">
                      <img :src="imagePath(scope.row.furnaceTemperature12)" />
                    </span>
                    <span v-else-if="scope.$index === 5">
                      {{ scope.row.furnaceTemperature12 + '%' }}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column prop="furnaceTemperature34" label="3&4" :width="columnWidth(7)">
                  <template #default="scope">
                    <span v-if="scope.$index === 4">
                      <img :src="imagePath(scope.row.furnaceTemperature34)" />
                    </span>
                    <span v-else-if="scope.$index === 5">
                      {{ scope.row.furnaceTemperature34 + '%' }}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column prop="furnaceTemperature56" label="5&6" :width="columnWidth(7)">
                  <template #default="scope">
                    <span v-if="scope.$index === 4">
                      <img :src="imagePath(scope.row.furnaceTemperature56)" />
                    </span>
                    <span v-else-if="scope.$index === 5">
                      {{ scope.row.furnaceTemperature56 + '%' }}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column prop="furnaceTemperature78" label="7&8" :width="columnWidth(7)">
                  <template #default="scope">
                    <span v-if="scope.$index === 4">
                      <img :src="imagePath(scope.row.furnaceTemperature78)" />
                    </span>
                    <span v-else-if="scope.$index === 5">
                      {{ scope.row.furnaceTemperature78 + '%' }}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column prop="furnaceTemperature910" label="9&10" :width="columnWidth(7)">
                  <template #default="scope">
                    <span v-if="scope.$index === 4">
                      <img :src="imagePath(scope.row.furnaceTemperature910)" />
                    </span>
                    <span v-else-if="scope.$index === 5">
                      {{ scope.row.furnaceTemperature910 + '%' }}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column prop="furnaceTemperature1112" label="11&12" :width="columnWidth(7)">
                  <template #default="scope">
                    <span v-if="scope.$index === 4">
                      <img :src="imagePath(scope.row.furnaceTemperature1112)" />
                    </span>
                    <span v-else-if="scope.$index === 5">
                      {{ scope.row.furnaceTemperature1112 + '%' }}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column prop="furnaceTemperature13" label="13" :width="columnWidth(7)">
                  <template #default="scope">
                    <span v-if="scope.$index === 4">
                      <img :src="imagePath(scope.row.furnaceTemperature13)" />
                    </span>
                    <span v-else-if="scope.$index === 5">
                      {{ scope.row.furnaceTemperature13 + '%' }}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column prop="furnaceTemperature14" label="14" :width="columnWidth(7)">
                  <template #default="scope">
                    <span v-if="scope.$index === 4">
                      <img :src="imagePath(scope.row.furnaceTemperature14)" />
                    </span>
                    <span v-else-if="scope.$index === 5">
                      {{ scope.row.furnaceTemperature14 + '%' }}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column prop="slowCool" label="缓冷" :width="columnWidth(7)">
                  <template #default="scope">
                    <span v-if="scope.$index == 4 || scope.$index == 5"> - </span>
                  </template>
                </el-table-column>
                <el-table-column prop="fastCool" label="快冷" :width="columnWidth(7)">
                  <template #default="scope">
                    <span v-if="scope.$index == 4 || scope.$index == 5"> - </span>
                  </template>
                </el-table-column>
                <el-table-column prop="aging1" label="时效1" :width="columnWidth(7)">
                  <template #default="scope">
                    <span v-if="scope.$index == 4 || scope.$index == 5"> - </span>
                  </template>
                </el-table-column>
                <el-table-column prop="aging2" label="时效2" :width="columnWidth(7)">
                  <template #default="scope">
                    <span v-if="scope.$index == 4 || scope.$index == 5"> - </span>
                  </template>
                </el-table-column>
                <el-table-column prop="aging3" label="时效3" :width="columnWidth(7)">
                  <template #default="scope">
                    <span v-if="scope.$index == 4 || scope.$index == 5"> - </span>
                  </template>
                </el-table-column>
                <el-table-column prop="endCool" label="终冷" :width="columnWidth(7)">
                  <template #default="scope">
                    <span v-if="scope.$index == 4 || scope.$index == 5"> - </span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </new-coil-card>
        </el-col>
      </el-row>
      <el-row :gutter="24" style="height: 30vh">
        <el-col :span="18">
          <new-coil-card :title="annealGraphTitle">
            <template #header-right>
              <el-select v-model="annealGraphOption" placeholder="请选择" @change="annealHandleOptionChange()" label="炉区" size="small">
                <el-option v-for="item in annealGraphOptions" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </template>
            <graph-anneal
              :graph-data-upper="upperGraph.toArray()"
              :graph-data-anneal="dataY.toArray()"
              :graph-data-next="dataNext.toArray()"
              :graph-data-lower="lowerGraph.toArray()"
              :xdata="dataTimeX.toArray()"
              :change="graphOptions[annealGraphOption].changeRef.value"
            />
          </new-coil-card>
        </el-col>
        <el-col :span="6">
          <new-coil-card title="基本信息" :class="viewportWidth == 1920 ? '' : 'base-info-125'">
            <el-table :data="baseInfoTableData" style="width: 100%" :header-cell-style="{ background: '#2f59af', color: '#fff' }" size="small">
              <el-table-column prop="基本信息" label="基本信息" />
              <el-table-column prop="currentCoil" label="当前卷">
                <template #default="scope">
                  <span v-if="scope.$index === 4">
                    <img :src="imagePath(scope.row.currentCoil)" />
                  </span>
                </template>
              </el-table-column>
              <el-table-column prop="nextCoil" label="下一卷">
                <template #default="scope">
                  <span v-if="scope.$index === 4">
                    <img :src="imagePath(scope.row.nextCoil)" />
                  </span>
                </template>
              </el-table-column>
            </el-table>
          </new-coil-card>
        </el-col>
      </el-row>
      <el-row style="height: 30vh; margin-top: 1vh">
        <el-col :span="24">
          <new-coil-card title="实时温度曲线">
            <template #header-right>
              <el-select v-model="temGraphOption" placeholder="请选择" @change="handleOptionChange()" label="炉区" class="" size="small">
                <el-option v-for="item in temGraphOptions" :key="item.value" :label="item.label" :value="item" />
              </el-select>
            </template>
            <graph-card
              :graph-data-a-i="graphDataAI.toArray()"
              :graph-data-m-m="graphDataMM.toArray()"
              :graph-data-p-l-c="graphDataPLC.toArray()"
              :xdata="realTempTimeX.toArray()"
            />
          </new-coil-card>
        </el-col>
      </el-row>
      <el-row style="height: 13vh; margin-top: 1vh">
        <el-col :span="24">
          <new-coil-card title="AI模型投用状态">
            <el-table :data="aiModeTableData" style="width: 100%" :header-cell-style="{ background: '#2f59af', color: '#fff' }" size="small">
              <el-table-column prop="furnaceTemperature12" label="炉温1&2" align="center">
                <template #default="scope">
                  <span v-if="scope.$index === 0">
                    <img :src="imagePath(scope.row.furnaceTemperature12)" />
                  </span>
                </template>
              </el-table-column>
              <el-table-column prop="furnaceTemperature34" label="炉温3&4" align="center">
                <template #default="scope">
                  <span v-if="scope.$index === 0">
                    <img :src="imagePath(scope.row.furnaceTemperature34)" />
                  </span>
                </template>
              </el-table-column>
              <el-table-column prop="furnaceTemperature56" label="炉温5&6" align="center">
                <template #default="scope">
                  <span v-if="scope.$index === 0">
                    <img :src="imagePath(scope.row.furnaceTemperature56)" />
                  </span>
                </template>
              </el-table-column>
              <el-table-column prop="furnaceTemperature78" label="炉温7&8" align="center">
                <template #default="scope">
                  <span v-if="scope.$index === 0">
                    <img :src="imagePath(scope.row.furnaceTemperature78)" />
                  </span>
                </template>
              </el-table-column>
              <el-table-column prop="furnaceTemperature910" label="炉温9&10" align="center">
                <template #default="scope">
                  <span v-if="scope.$index === 0">
                    <img :src="imagePath(scope.row.furnaceTemperature910)" />
                  </span>
                </template>
              </el-table-column>
              <el-table-column prop="furnaceTemperature1112" label="炉温11&12" align="center">
                <template #default="scope">
                  <span v-if="scope.$index === 0">
                    <img :src="imagePath(scope.row.furnaceTemperature1112)" />
                  </span>
                </template>
              </el-table-column>
              <el-table-column prop="furnaceTemperature13" label="炉温13" align="center">
                <template #default="scope">
                  <span v-if="scope.$index === 0">
                    <img :src="imagePath(scope.row.furnaceTemperature13)" />
                  </span>
                </template>
              </el-table-column>
              <el-table-column prop="furnaceTemperature14" label="炉温14" align="center">
                <template #default="scope">
                  <span v-if="scope.$index === 0">
                    <img :src="imagePath(scope.row.furnaceTemperature14)" />
                  </span>
                </template>
              </el-table-column>
              <el-table-column prop="slowCool" label="缓冷" align="center">
                <template #default="scope">
                  <span v-if="scope.$index === 0">
                    <img :src="imagePath(scope.row.slowCool)" />
                  </span>
                </template>
              </el-table-column>
              <el-table-column prop="slowCool" label="快冷" align="center">
                <template #default="scope">
                  <span v-if="scope.$index === 0">
                    <img :src="imagePath(scope.row.fastCool)" />
                  </span>
                </template>
              </el-table-column>
              <el-table-column prop="slowCool" label="时效1" align="center">
                <template #default="scope">
                  <span v-if="scope.$index === 0">
                    <img :src="imagePath(scope.row.aging1)" />
                  </span>
                </template>
              </el-table-column>
              <el-table-column prop="slowCool" label="时效2" align="center">
                <template #default="scope">
                  <span v-if="scope.$index === 0">
                    <img :src="imagePath(scope.row.aging2)" />
                  </span>
                </template>
              </el-table-column>
              <el-table-column prop="slowCool" label="时效3" align="center">
                <template #default="scope">
                  <span v-if="scope.$index === 0">
                    <img :src="imagePath(scope.row.aging3)" />
                  </span>
                </template>
              </el-table-column>
              <el-table-column prop="slowCool" label="终冷" align="center">
                <template #default="scope">
                  <span v-if="scope.$index === 0">
                    <img :src="imagePath(scope.row.endCool)" />
                  </span>
                </template>
              </el-table-column>
            </el-table>
          </new-coil-card>
        </el-col>
      </el-row>
    </el-col>
  </div>
</template>
<script lang="ts" setup>
  import NewCoilCard from '/@/components/NewCoilCard/NewCoilCard.vue';
  import { ref, onMounted, onUnmounted, onBeforeMount } from 'vue';
  import GraphCard from '/@/components/CpcWidth/GraphCard.vue';
  import GraphAnneal from '/@/components/GraphDraw/GraphAnneal.vue';
  import dayjs from 'dayjs';
  import { CAL2150TempCtrlApi } from '/@/api/CAL2150TempCtrl/index';
  import { ElMessage } from 'element-plus';
  import { refreshSVG, initialSVG, refreshGraphical } from '/@/common/refreshSVG';
  import { rollingSimulationApi } from '/@/api/RollingSimulation/index';
  import { useUserStore } from '/@/store/modules/system/user';
  import CircularDeque from './deque';

  const baseInfoTableData = ref([
    { 基本信息: '钢卷号', currentCoil: '', nextCoil: '' },
    { 基本信息: '钢种', currentCoil: '', nextCoil: '' },
    { 基本信息: '宽度', currentCoil: '', nextCoil: '' },
    { 基本信息: '厚度', currentCoil: '', nextCoil: '' },
    { 基本信息: '反射率异常', currentCoil: '', nextCoil: '' },
  ]);
  let tr: any = null;
  let por: any = null;
  let ti: any = null;

  // 图表数据量上限
  const MAX_DATA_POINTS = 300;
  const viewportWidth = ref();
  const viewportHeight = ref();
  const graphDataAI = ref(new CircularDeque<any>(MAX_DATA_POINTS));
  const graphDataMM = ref(new CircularDeque<any>(MAX_DATA_POINTS));
  const graphDataPLC = ref(new CircularDeque<any>(MAX_DATA_POINTS));
  const setInfoTableRef = ref();
  const exportLooper = ref<number>(0);

  // --- 生命周期钩子 ---
  let interval: any = null;

  const dataY = ref(new CircularDeque<any>(MAX_DATA_POINTS)); //退火曲线数据
  const dataNext = ref(new CircularDeque<any>(MAX_DATA_POINTS)); //退火曲线数据（切卷用）
  const p3Change = ref(0); //退火曲线切卷判定用
  const p5Change = ref(0); //退火曲线切卷判定用
  const p6Change = ref(0); //退火曲线切卷判定用
  const p8Change = ref(0); //退火曲线切卷判定用
  const p9Change = ref(0); //退火曲线切卷判定用
  const p10Change = ref(0); //退火曲线切卷判定用
  const p11Change = ref(0); //退火曲线切卷判定用
  const p12Change = ref(0); //退火曲线切卷判定用
  const beforeChange = ref<number>(0); //退火曲线切卷判定用(上一个炉子)
  const currentId = ref(''); // 当前卷号
  const dataTimeX = ref(new CircularDeque<any>(MAX_DATA_POINTS)); // 退火曲线时间轴数据
  const realTempTimeX = ref(new CircularDeque<any>(MAX_DATA_POINTS)); // 实时温度曲线时间轴数据
  const lowerGraph = ref(new CircularDeque<any>(MAX_DATA_POINTS)); // 退火曲线下限数据
  const upperGraph = ref(new CircularDeque<any>(MAX_DATA_POINTS)); // 退火曲线上限数据
  const technologicalName = 'CAL2150'; // 工艺名称 CAL2150连退
  const inletLooper = ref<number>(0); // 钢卷跟踪用变量
  const middleLooper = ref<number>(0); // 钢卷跟踪用变量
  const aiModeTableData = ref([
    {
      furnaceTemperature12: 0,
      furnaceTemperature34: 0,
      furnaceTemperature56: 0,
      furnaceTemperature78: 0,
      furnaceTemperature910: 0,
      furnaceTemperature1112: 0,
      furnaceTemperature13: 0,
      furnaceTemperature14: 0,
      slowCool: 0,
      fastCool: 0,
      aging1: 0,
      aging2: 0,
      aging3: 0,
      endCool: 0,
    },
  ]);

  type Options = {
    value: number;
    label: string;
  };

  // 定义图表选项接口
  interface AnnealGraphOption {
    value: number;
    label: string;
    topTag: string; // 顶部曲线标签
    middleTag: string; // 中间温度标签
    bottomTag: string; // 底部曲线标签
    changeRef: Ref<number>; // 变化状态引用
  }

  // 定义图表选项配置
  const graphOptions: AnnealGraphOption[] = [
    {
      value: 0,
      label: 'P3',
      topTag: 'p3_linetop',
      middleTag: 'cal_heat_strip_temp',
      bottomTag: 'p3_linebtm',
      changeRef: p3Change,
    },
    {
      value: 1,
      label: 'P5',
      topTag: 'p5_linetop',
      middleTag: 'cal_soak_strip_temp',
      bottomTag: 'p5_linebtm',
      changeRef: p5Change,
    },
    {
      value: 2,
      label: 'P6',
      topTag: 'p6_linetop',
      middleTag: 'cal_sc_strip_temp',
      bottomTag: 'p6_linebtm',
      changeRef: p6Change,
    },
    {
      value: 3,
      label: 'P8',
      topTag: 'p8_linetop',
      middleTag: 'cal_rc_strip_temp',
      bottomTag: 'p8_linebtm',
      changeRef: p8Change,
    },
    {
      value: 4,
      label: 'P9',
      topTag: 'p9_linetop',
      middleTag: 'cal_oas1_strip_temp',
      bottomTag: 'p9_linebtm',
      changeRef: p9Change,
    },
    {
      value: 5,
      label: 'P10',
      topTag: 'p10_linetop',
      middleTag: 'cal_oas2_strip_temp',
      bottomTag: 'p10_linebtm',
      changeRef: p10Change,
    },
    {
      value: 6,
      label: 'P11',
      topTag: 'p11_linetop',
      middleTag: 'cal_oas3_strip_temp',
      bottomTag: 'p11_linebtm',
      changeRef: p11Change,
    },
    {
      value: 7,
      label: 'P12',
      topTag: 'p12_linetop',
      middleTag: 'cal_fc_strip_temp',
      bottomTag: 'p12_linebtm',
      changeRef: p12Change,
    },
  ];

  // 定义警告表格数据接口
  interface WarningTableData {
    chinese: string;
    furnaceTemperature12: string;
    furnaceTemperature34: string;
    furnaceTemperature56: string;
    furnaceTemperature78: string;
    furnaceTemperature910: string;
    furnaceTemperature1112: string;
    furnaceTemperature13: string;
    furnaceTemperature14: string;
    slowCool: string;
    fastCool: string;
    aging1: string;
    aging2: string;
    aging3: string;
    endCool: string;
  }

  const warningTableData = ref<WarningTableData[]>([
    {
      chinese: '当前卷AI设定初始值',
      furnaceTemperature12: '',
      furnaceTemperature34: '',
      furnaceTemperature56: '',
      furnaceTemperature78: '',
      furnaceTemperature910: '',
      furnaceTemperature1112: '',
      furnaceTemperature13: '',
      furnaceTemperature14: '',
      slowCool: '',
      fastCool: '',
      aging1: '',
      aging2: '',
      aging3: '',
      endCool: '',
    },
    {
      chinese: '当前卷AI模型设定值',
      furnaceTemperature12: '',
      furnaceTemperature34: '',
      furnaceTemperature56: '',
      furnaceTemperature78: '',
      furnaceTemperature910: '',
      furnaceTemperature1112: '',
      furnaceTemperature13: '',
      furnaceTemperature14: '',
      slowCool: '',
      fastCool: '',
      aging1: '',
      aging2: '',
      aging3: '',
      endCool: '',
    },
    {
      chinese: '下一卷AI模型设定值',
      furnaceTemperature12: '',
      furnaceTemperature34: '',
      furnaceTemperature56: '',
      furnaceTemperature78: '',
      furnaceTemperature910: '',
      furnaceTemperature1112: '',
      furnaceTemperature13: '',
      furnaceTemperature14: '',
      slowCool: '',
      fastCool: '',
      aging1: '',
      aging2: '',
      aging3: '',
      endCool: '',
    },
    {
      chinese: '实际值',
      furnaceTemperature12: '',
      furnaceTemperature34: '',
      furnaceTemperature56: '',
      furnaceTemperature78: '',
      furnaceTemperature910: '',
      furnaceTemperature1112: '',
      furnaceTemperature13: '',
      furnaceTemperature14: '',
      slowCool: '',
      fastCool: '',
      aging1: '',
      aging2: '',
      aging3: '',
      endCool: '',
    },
    {
      chinese: '供热能力',
      furnaceTemperature12: '',
      furnaceTemperature34: '',
      furnaceTemperature56: '',
      furnaceTemperature78: '',
      furnaceTemperature910: '',
      furnaceTemperature1112: '',
      furnaceTemperature13: '',
      furnaceTemperature14: '',
      slowCool: '',
      fastCool: '',
      aging1: '',
      aging2: '',
      aging3: '',
      endCool: '',
    },
    {
      chinese: '辐射管使用率',
      furnaceTemperature12: '',
      furnaceTemperature34: '',
      furnaceTemperature56: '',
      furnaceTemperature78: '',
      furnaceTemperature910: '',
      furnaceTemperature1112: '',
      furnaceTemperature13: '',
      furnaceTemperature14: '',
      slowCool: '',
      fastCool: '',
      aging1: '',
      aging2: '',
      aging3: '',
      endCool: '',
    },
  ]);

  // 下拉框选项
  const temGraphOptions = ref([
    { value: 0, label: '炉温1&2' },
    { value: 1, label: '炉温3&4' },
    { value: 2, label: '炉温5&6' },
    { value: 3, label: '炉温7&8' },
    { value: 4, label: '炉温9&10' },
    { value: 5, label: '炉温11&12' },
    { value: 6, label: '炉温13' },
    { value: 7, label: '炉温14' },
  ]);

  // 下拉框选项
  const annealGraphOptions = ref([
    { value: 0, label: 'P3' },
    { value: 1, label: 'P5' },
    { value: 2, label: 'P6' },
    { value: 3, label: 'P8' },
    { value: 4, label: 'P9' },
    { value: 5, label: 'P10' },
    { value: 6, label: 'P11' },
    { value: 7, label: 'P12' },
  ]);
  const temGraphOption = ref<Options>({ value: 0, label: '炉温1&2' });
  const annealGraphOption = ref<number>(0);
  const annealGraphTitle = ref('P3与退火曲线实时对比');

  interface PTEM {
    p3temp: string;
    p5temp: string;
    p6temp: string;
    p8temp: string;
    p9temp: string;
    p10temp: string;
    p11temp: string;
    p12temp: string;
    distance: string;
  }

  // 各个炉温实时值
  const ptem = ref<PTEM>({
    p3temp: '0',
    p5temp: '0',
    p6temp: '0',
    p8temp: '0',
    p9temp: '0',
    p10temp: '0',
    p11temp: '0',
    p12temp: '0',
    distance: '0',
  });

  // 警告信息
  const warningInfo = ref('');

  // 露点数据
  const dewPoint = ref<any>({
    chinese: '露点',
    FC: '0', // 终冷段露点
    OAS3: '0', // [时效三露点]
    OAS2: '0', // [时效二露点]
    OAS1: '0', // [时效一露点]
    RCZ1_2: '0', // 快冷段露点
    SCZ1: '0', // 缓冷段露点
    Skg: '0', // 保温段露点
    Htg1: '0', // 加热段露点
    PHtg: '0', // 预热段露点
  });

  const columnWidth = (percent: number) => {
    const tableWidth = viewportWidth.value / 2; // 根据实际父容器宽度设置
    return (tableWidth * percent) / 100 + 'px';
  };

  // 正常（0）/ 异常 （1）判定
  const imagePath = (value: number) => {
    let name = 'red.png';
    if (value == 0) {
      name = 'green.png';
    }
    return `/src/assets/images/${name}`;
  };

  // 实时温度曲线图表切换
  const handleOptionChange = () => {
    graphDataAI.value.clear();
    graphDataMM.value.clear();
    graphDataPLC.value.clear();
    realTempTimeX.value.clear();
    p3Change.value = 0;
    p5Change.value = 0;
    p6Change.value = 0;
    p8Change.value = 0;
    p9Change.value = 0;
    p10Change.value = 0;
    p11Change.value = 0;
    p12Change.value = 0;
  };

  // 退火曲线切换
  const annealHandleOptionChange = async () => {
    upperGraph.value.clear();
    lowerGraph.value.clear();
    dataY.value.clear();
    dataNext.value.clear();
    dataTimeX.value.clear();
    currentId.value = '';
    annealGraphTitle.value = `${annealGraphOptions.value[annealGraphOption.value].label}与退火曲线实时对比`;

    const changeRefsMap: { [key: number]: Ref<number> } = {
      0: p3Change,
      1: p5Change,
      2: p6Change,
      3: p8Change,
      4: p9Change,
      5: p10Change,
      6: p11Change,
      7: p12Change,
    };

    // 获取当前选中的值
    const currentValue = annealGraphOption.value;
    const judgeValue = changeRefsMap[beforeChange.value].value;

    // 重置所有卷判定值为0
    Object.values(changeRefsMap).forEach((ref) => {
      ref.value = 0;
    });

    if (judgeValue) {
      changeRefsMap[currentValue].value = judgeValue;
    }
    beforeChange.value = currentValue;
  };

  // 钢卷跟踪
  async function getZoneTrk() {
    let param = {
      name: 'CAL2150_zonetrk',
    };
    rollingSimulationApi.rest(param).then((res) => {
      let zones = res.data.zoneno;
      if (currentId.value == '') {
        annealGraphOption.value == 0
          ? (currentId.value = zones[40].entId)
          : annealGraphOption.value == 1
          ? (currentId.value = zones[43].entId)
          : annealGraphOption.value == 2
          ? (currentId.value = zones[45].entId)
          : annealGraphOption.value == 3
          ? (currentId.value = zones[49].entId)
          : annealGraphOption.value == 4
          ? (currentId.value = zones[51].entId)
          : annealGraphOption.value == 5
          ? (currentId.value = zones[53].entId)
          : annealGraphOption.value == 6
          ? (currentId.value = zones[55].entId)
          : (currentId.value = zones[58].entId);
      }
      if (annealGraphOption.value == 0 && zones[40].entId != currentId.value) {
        currentId.value = zones[40].entId;
        p3Change.value += 1;
      } else if (annealGraphOption.value == 1 && zones[43].entId != currentId.value) {
        currentId.value = zones[43].entId;
        p5Change.value += 1;
      } else if (annealGraphOption.value == 2 && zones[45].entId != currentId.value) {
        currentId.value = zones[45].entId;
        p6Change.value += 1;
      } else if (annealGraphOption.value == 4 && zones[49].entId != currentId.value) {
        currentId.value = zones[49].entId;
        p8Change.value += 1;
      } else if (annealGraphOption.value == 5 && zones[51].entId != currentId.value) {
        currentId.value = zones[51].entId;
        p9Change.value += 1;
      } else if (annealGraphOption.value == 6 && zones[53].entId != currentId.value) {
        currentId.value = zones[53].entId;
        p10Change.value += 1;
      } else if (annealGraphOption.value == 7 && zones[55].entId != currentId.value) {
        currentId.value = zones[55].entId;
        p11Change.value += 1;
      } else if (annealGraphOption.value == 8 && zones[58].entId != currentId.value) {
        currentId.value = zones[58].entId;
        p12Change.value += 1;
      }
      //weldMachineState(`${technologicalName}-welder`, res.data.weld);
      inletLooper.value = res.data['loop'][0];
      middleLooper.value = res.data['loop'][1];
      exportLooper.value = res.data['loop'][2];

      let trKey = `${technologicalName}-ZONE_tr${res.data.tr}`;
      let trpathKey = trKey + '_path';
      let porKey = `${technologicalName}-ZONE_por${res.data.por}`;
      let porpathKey = porKey + '_path';
      var arr = Object.keys(zones);
      /**开卷机和卷取机 */
      if (tr === null || tr !== res.data.tr) {
        tr = res.data.tr;
        refreshSVG(zones[arr.length - 1].ti % 10, trpathKey);
        refreshGraphical(zones[arr.length - 1].ti % 10, trKey);
        initialSVG(technologicalName, 'tr', res.data.tr);
      }
      if (por === null || por !== res.data.por) {
        por = res.data.por;
        if (res.data.por === 0) {
          initialSVG(technologicalName, 'por', '1');
          initialSVG(technologicalName, 'por', '2');
        }
      }
      if (ti === null || ti !== zones[0].ti) {
        ti = zones[0].ti;
        refreshSVG(zones[0].ti % 10, porpathKey);
        refreshGraphical(zones[0].ti % 10, porKey);
        initialSVG(technologicalName, 'por', res.data.por);
      }
      for (let i in zones) {
        let pathkey = `${technologicalName}-ZONE${i}`;
        refreshSVG(zones[i].ti % 10, pathkey);
      }
    });
  }

  // 获取露点数据
  async function getDewPointData() {
    try {
      const param = {
        name: 'CAL2150_RuleTopic',
      };
      await CAL2150TempCtrlApi.getDewPointData(param).then((res) => {
        if (res.data) {
          res.data.forEach((element: any) => {
            if (element.chinese == '预热段露点') dewPoint.value.PHtg = element.actualValue;
            if (element.chinese == '加热段露点') dewPoint.value.Htg1 = element.actualValue;
            if (element.chinese == '缓冷段露点') dewPoint.value.Skg = element.actualValue;
            if (element.chinese == '缓冷段露点') dewPoint.value.SCZ1 = element.actualValue;
            if (element.chinese == '快冷段露点') dewPoint.value.RCZ1_2 = element.actualValue;
            if (element.chinese == '[时效一露点]') dewPoint.value.OAS1 = element.actualValue;
            if (element.chinese == '[时效二露点]') dewPoint.value.OAS2 = element.actualValue;
            if (element.chinese == '[时效三露点]') dewPoint.value.OAS3 = element.actualValue;
            if (element.chinese == '[终冷段露点]') dewPoint.value.FC = element.actualValue;
          });
        }
      });
    } catch (error) {
      console.error('获取露点数据失败：' + error);
      throw error;
    }
  }

  const fetchData = () => {
    try {
      interval = setInterval(() => {
        getZoneTrk();
        getHMI();
        getCurCoilAISet();
        getDewPointData();
        dataTimeX.value.push(dayjs().format('HH:mm:ss'));
        realTempTimeX.value.push(dayjs().format('HH:mm:ss'));
      }, 2000);
    } catch (error: any) {
      console.error('error:' + error);
      ElMessage.error('获取数据失败');
    }
  };

  // 获取页面数据
  const getHMI = async () => {
    try {
      const tagGroups = {
        // 炉温（8个）
        furnaceTemps: [
          'cal_heat_strip_temp',
          'cal_soak_strip_temp',
          'cal_sc_strip_temp',
          'cal_rc_strip_temp',
          'cal_oas1_strip_temp',
          'cal_oas2_strip_temp',
          'cal_oas3_strip_temp',
          'cal_fc_strip_temp',
        ],
        // 当前卷AI设定初始值（14个）
        currentCoilAIStart: ['FURT_12_AI', 'FURT_34_AI', 'FURT_56_AI', 'FURT_78_AI', 'FURT_910_AI', 'FURT_1112_AI', 'FURT_13_AI', 'FURT_14_AI'],
        // 当前卷AI设定值（14个）
        currentCoilAISet: [
          'FURT_12',
          'FURT_34',
          'FURT_56',
          'FURT_78',
          'FURT_910',
          'FURT_1112',
          'FURT_13',
          'FURT_14',
          'SLOWCOOL',
          'SCSSET',
          'OA1FSET',
          'OA2FSET',
          'OA3FSET',
          'FCSSET',
        ],
        // 下一卷AI设定值（14个）
        nextCoilAISet: [
          'FURT_12NXT',
          'FURT_34NXT',
          'FURT_56NXT',
          'FURT_78NXT',
          'FURT_910NXT',
          'FURT_1112NXT',
          'FURT_13NXT',
          'FURT_14NXT',
          'SLOWCOOLNXT',
          'SCSSETNXT',
          'OA1FSETNXT',
          'OA2FSETNXT',
          'OA3FSETNXT',
          'FCSSETNXT',
        ],
        // 实际值（11个）
        actualValues: [
          'cal_heat_fur_z1_2_temp',
          'cal_heat_fur_z3_4_temp',
          'cal_heat_fur_z5_6_temp',
          'cal_heat_fur_z7_8_temp',
          'cal_heat_fur_z9_10_temp',
          'cal_heat_fur_z11_12_temp',
          'cal_soak_fur_z13_temp',
          'cal_soak_fur_z14_temp',
          'cal_oas1_fur_temp',
          'cal_oas2_fur_temp',
          'cal_oas3_fur_temp',
        ],
        // 供热能力（8个）
        heatCapacities: ['gr12', 'gr34', 'gr56', 'gr78', 'gr910', 'gr1112', 'gr13', 'gr14'],
        // 辐射管使用率（8个）
        tubeUsageRates: ['sz12', 'sz34', 'sz56', 'sz78', 'sz910', 'sz1112', 'sz13', 'sz14'],
        // 基本信息（10个）
        baseInfos: ['coilid', 'STEELTP', 'width', 'thick', 'fslv', 'coilidnxt', 'STEELTPNXT', 'widthnxt', 'thicknxt', 'fslvnxt'],
        // 退火曲线（16个）
        annealCurves: [
          'p3_linebtm',
          'p3_linetop',
          'p5_linebtm',
          'p5_linetop',
          'p6_linebtm',
          'p6_linetop',
          'p8_linebtm',
          'p8_linetop',
          'p9_linebtm',
          'p9_linetop',
          'p10_linebtm',
          'p10_linetop',
          'p11_linebtm',
          'p11_linetop',
          'p12_linebtm',
          'p12_linetop',
        ],
        // 实时温度曲线（8个）
        realtimeCurves: [
          'cal_heat_fur_z1_2_MM',
          'cal_heat_fur_z3_4_MM',
          'cal_heat_fur_z5_6_MM',
          'cal_heat_fur_z7_8_MM',
          'cal_heat_fur_z9_10_MM',
          'cal_heat_fur_z11_12_MM',
          'cal_heat_fur_z13_MM',
          'cal_heat_fur_z14_MM',
        ],
        // AI模型投用状态（14个）
        aiModes: [
          'GAL1_DATA.ControlModeHS12',
          'GAL1_DATA.ControlModeHS34',
          'GAL1_DATA.ControlModeHS56',
          'GAL1_DATA.ControlModeHS78',
          'GAL1_DATA.ControlModeHS910',
          'GAL1_DATA.ControlModeHS1112',
          'GAL1_DATA.ControlModeSOAK13',
          'GAL1_DATA.ControlModeSOAK14',
          'GAL1_DATA.ControlModeSCS',
          'GAL1_DATA.ControlModeRC',
          'GAL1_DATA.ControlModeOVAG1',
          'GAL1_DATA.ControlModeOVAG2',
          'GAL1_DATA.ControlModeOVAG3',
          'GAL1_DATA.ControlModeFC',
        ],
        // 其他单独标签
        others: ['WELD_TO_FUR', 'result'],
      };
      const tagNames = [
        ...tagGroups.furnaceTemps,
        ...tagGroups.currentCoilAIStart,
        ...tagGroups.currentCoilAISet,
        ...tagGroups.nextCoilAISet,
        ...tagGroups.actualValues,
        ...tagGroups.heatCapacities,
        ...tagGroups.tubeUsageRates,
        ...tagGroups.baseInfos,
        ...tagGroups.annealCurves,
        ...tagGroups.realtimeCurves,
        ...tagGroups.aiModes,
        ...tagGroups.others,
      ];

      // 构造请求参数
      const param = {
        action: 'get_tags',
        operator: 'abc',
        terminal: 'FM_01',
        body: tagNames.map((tagName) => ({ tagName: tagName, timestamp: 0 })),
      };

      const res = await CAL2150TempCtrlApi.getTableData(param);
      const tagValueMap = res.data.results.reduce((map: any, item: any) => {
        map[item.tagName] = item.value;
        return map;
      }, {});

      // 格式化数值
      const formatNum = (value: any) => {
        if (value == null || isNaN(value)) return '0.00';
        return value.toFixed(2);
      };

      //  赋值：实时炉温
      ptem.value = {
        p3temp: formatNum(tagValueMap[tagGroups.furnaceTemps[0]]),
        p5temp: formatNum(tagValueMap[tagGroups.furnaceTemps[1]]),
        p6temp: formatNum(tagValueMap[tagGroups.furnaceTemps[2]]),
        p8temp: formatNum(tagValueMap[tagGroups.furnaceTemps[3]]),
        p9temp: formatNum(tagValueMap[tagGroups.furnaceTemps[4]]),
        p10temp: formatNum(tagValueMap[tagGroups.furnaceTemps[5]]),
        p11temp: formatNum(tagValueMap[tagGroups.furnaceTemps[6]]),
        p12temp: formatNum(tagValueMap[tagGroups.furnaceTemps[7]]),
        distance: tagValueMap[tagGroups.others[0]], // 焊缝距离
      };

      warningInfo.value = tagValueMap[tagGroups.others[1]]
        .replace('STEELGRADE', '牌号')
        .replace('AIM', '目标')
        .replaceAll(':', ': ')
        .replaceAll(',', ', '); // 警告信息

      //赋值：当前卷AI设定初始值
      const [s12, s34, s56, s78, s910, s1112, s13, s14] = tagGroups.currentCoilAIStart.map((tag) => formatNum(tagValueMap[tag]));
      warningTableData.value[0] = {
        chinese: '当前卷AI设定初始值',
        furnaceTemperature12: s12,
        furnaceTemperature34: s34,
        furnaceTemperature56: s56,
        furnaceTemperature78: s78,
        furnaceTemperature910: s910,
        furnaceTemperature1112: s1112,
        furnaceTemperature13: s13,
        furnaceTemperature14: s14,
        slowCool: '-',
        fastCool: '-',
        aging1: '-',
        aging2: '-',
        aging3: '-',
        endCool: '-',
      };

      //赋值：当前卷AI设定值
      // const [f12, f34, f56, f78, f910, f1112, f13, f14, slowCool, fastCool, aging1, aging2, aging3, endCool] = tagGroups.currentCoilAISet.map((tag) =>
      //   formatNum(tagValueMap[tag])
      // );
      // warningTableData.value[1] = {
      //   chinese: '当前卷AI模型设定值',
      //   furnaceTemperature12: f12,
      //   furnaceTemperature34: f34,
      //   furnaceTemperature56: f56,
      //   furnaceTemperature78: f78,
      //   furnaceTemperature910: f910,
      //   furnaceTemperature1112: f1112,
      //   furnaceTemperature13: f13,
      //   furnaceTemperature14: f14,
      //   slowCool: slowCool,
      //   fastCool: fastCool,
      //   aging1: aging1,
      //   aging2: aging2,
      //   aging3: aging3,
      //   endCool: endCool,
      // };

      // 赋值：下一卷AI设定值
      const [nf12, nf34, nf56, nf78, nf910, nf1112, nf13, nf14, nSlowCool, nFastCool, nAging1, nAging2, nAging3, nEndCool] =
        tagGroups.nextCoilAISet.map((tag) => formatNum(tagValueMap[tag]));
      warningTableData.value[2] = {
        chinese: '下一卷AI模型设定值',
        furnaceTemperature12: nf12,
        furnaceTemperature34: nf34,
        furnaceTemperature56: nf56,
        furnaceTemperature78: nf78,
        furnaceTemperature910: nf910,
        furnaceTemperature1112: nf1112,
        furnaceTemperature13: nf13,
        furnaceTemperature14: nf14,
        slowCool: nSlowCool,
        fastCool: nFastCool,
        aging1: nAging1,
        aging2: nAging2,
        aging3: nAging3,
        endCool: nEndCool,
      };

      // 9. 赋值：实际值
      const [af12, af34, af56, af78, af910, af1112, af13, af14, aAging1, aAging2, aAging3] = tagGroups.actualValues.map((tag) =>
        formatNum(tagValueMap[tag])
      );
      warningTableData.value[3] = {
        chinese: '实际值',
        furnaceTemperature12: af12,
        furnaceTemperature34: af34,
        furnaceTemperature56: af56,
        furnaceTemperature78: af78,
        furnaceTemperature910: af910,
        furnaceTemperature1112: af1112,
        furnaceTemperature13: af13,
        furnaceTemperature14: af14,
        slowCool: formatNum(tagValueMap[tagGroups.furnaceTemps[1]]), // 对应原res[1]
        fastCool: formatNum(tagValueMap[tagGroups.furnaceTemps[3]]), // 对应原res[3]
        aging1: aAging1,
        aging2: aAging2,
        aging3: aAging3,
        endCool: formatNum(tagValueMap[tagGroups.furnaceTemps[7]]), // 对应原res[7]
      };

      //赋值：供热能力
      warningTableData.value[4] = {
        chinese: '供热能力',
        furnaceTemperature12: tagValueMap[tagGroups.heatCapacities[0]],
        furnaceTemperature34: tagValueMap[tagGroups.heatCapacities[1]],
        furnaceTemperature56: tagValueMap[tagGroups.heatCapacities[2]],
        furnaceTemperature78: tagValueMap[tagGroups.heatCapacities[3]],
        furnaceTemperature910: tagValueMap[tagGroups.heatCapacities[4]],
        furnaceTemperature1112: tagValueMap[tagGroups.heatCapacities[5]],
        furnaceTemperature13: tagValueMap[tagGroups.heatCapacities[6]],
        furnaceTemperature14: tagValueMap[tagGroups.heatCapacities[7]],
        slowCool: '-',
        fastCool: '-',
        aging1: '-',
        aging2: '-',
        aging3: '-',
        endCool: '-',
      };

      // 赋值：辐射管使用率（对应tubeUsageRates）
      warningTableData.value[5] = {
        chinese: '辐射管使用率',
        furnaceTemperature12: formatNum(tagValueMap[tagGroups.tubeUsageRates[0]]),
        furnaceTemperature34: formatNum(tagValueMap[tagGroups.tubeUsageRates[1]]),
        furnaceTemperature56: formatNum(tagValueMap[tagGroups.tubeUsageRates[2]]),
        furnaceTemperature78: formatNum(tagValueMap[tagGroups.tubeUsageRates[3]]),
        furnaceTemperature910: formatNum(tagValueMap[tagGroups.tubeUsageRates[4]]),
        furnaceTemperature1112: formatNum(tagValueMap[tagGroups.tubeUsageRates[5]]),
        furnaceTemperature13: formatNum(tagValueMap[tagGroups.tubeUsageRates[6]]),
        furnaceTemperature14: formatNum(tagValueMap[tagGroups.tubeUsageRates[7]]),
        slowCool: '-',
        fastCool: '-',
        aging1: '-',
        aging2: '-',
        aging3: '-',
        endCool: '-',
      };

      // 赋值：基本信息（对应baseInfos）
      const [coilid, steelTp, width, thick, fslv, coilidNxt, steelTpNxt, widthNxt, thickNxt, fslvNxt] = tagGroups.baseInfos.map(
        (tag) => tagValueMap[tag]
      );
      baseInfoTableData.value = [
        { 基本信息: '钢卷号', currentCoil: coilid, nextCoil: coilidNxt },
        { 基本信息: '钢种', currentCoil: steelTp, nextCoil: steelTpNxt },
        { 基本信息: '宽度', currentCoil: width, nextCoil: widthNxt },
        { 基本信息: '厚度', currentCoil: thick, nextCoil: thickNxt },
        { 基本信息: '反射率异常', currentCoil: fslv, nextCoil: fslvNxt },
      ];

      // 退火曲线：用配置表替代if-else（对应annealCurves）
      const annealConfig = [
        { option: 0, btmIdx: 0, topIdx: 1, tempIdx: 0, change: p3Change },
        { option: 1, btmIdx: 2, topIdx: 3, tempIdx: 1, change: p5Change }, // 原数据中annealCurves[2]和[3]都是p5_linebtm
        { option: 2, btmIdx: 4, topIdx: 5, tempIdx: 2, change: p6Change },
        { option: 3, btmIdx: 6, topIdx: 7, tempIdx: 3, change: p8Change },
        { option: 4, btmIdx: 8, topIdx: 9, tempIdx: 4, change: p9Change },
        { option: 5, btmIdx: 10, topIdx: 11, tempIdx: 5, change: p10Change },
        { option: 6, btmIdx: 12, topIdx: 13, tempIdx: 6, change: p11Change },
        { option: 7, btmIdx: 14, topIdx: 15, tempIdx: 7, change: p12Change },
      ];
      const currentAnneal = annealConfig.find((item) => item.option === annealGraphOption.value);
      if (currentAnneal) {
        const { btmIdx, topIdx, tempIdx, change } = currentAnneal;
        lowerGraph.value.push(tagValueMap[tagGroups.annealCurves[btmIdx]]);
        upperGraph.value.push(tagValueMap[tagGroups.annealCurves[topIdx]]);
        const tempValue = formatNum(tagValueMap[tagGroups.furnaceTemps[tempIdx]]);
        if (change.value % 2 === 1) {
          dataY.value.push(null);
          dataNext.value.push(tempValue);
        } else {
          dataNext.value.push(null);
          dataY.value.push(tempValue);
        }
      }

      // 实时温度曲线：用配置表替代if-else（对应realtimeCurves）
      const tempCurveConfig = [
        { option: 0, mmIdx: 0, aiIdx: 0, plcIdx: 0 },
        { option: 1, mmIdx: 1, aiIdx: 1, plcIdx: 1 },
        { option: 2, mmIdx: 2, aiIdx: 2, plcIdx: 2 },
        { option: 3, mmIdx: 3, aiIdx: 3, plcIdx: 3 },
        { option: 4, mmIdx: 4, aiIdx: 4, plcIdx: 4 },
        { option: 5, mmIdx: 5, aiIdx: 5, plcIdx: 5 },
        { option: 6, mmIdx: 6, aiIdx: 6, plcIdx: 6 },
        { option: 7, mmIdx: 7, aiIdx: 7, plcIdx: 7 },
      ];
      const currentTempCurve = tempCurveConfig.find((item) => item.option === temGraphOption.value.value);
      if (currentTempCurve) {
        const { mmIdx, aiIdx, plcIdx } = currentTempCurve;
        graphDataMM.value.push(formatNum(tagValueMap[tagGroups.realtimeCurves[mmIdx]]));
        graphDataAI.value.push(formatNum(tagValueMap[tagGroups.currentCoilAISet[aiIdx]]));
        graphDataPLC.value.push(formatNum(tagValueMap[tagGroups.actualValues[plcIdx]]));
      }

      // 赋值：AI模型投用状态（对应aiModes）
      aiModeTableData.value[0] = {
        furnaceTemperature12: tagValueMap[tagGroups.aiModes[0]],
        furnaceTemperature34: tagValueMap[tagGroups.aiModes[1]],
        furnaceTemperature56: tagValueMap[tagGroups.aiModes[2]],
        furnaceTemperature78: tagValueMap[tagGroups.aiModes[3]],
        furnaceTemperature910: tagValueMap[tagGroups.aiModes[4]],
        furnaceTemperature1112: tagValueMap[tagGroups.aiModes[5]],
        furnaceTemperature13: tagValueMap[tagGroups.aiModes[6]],
        furnaceTemperature14: tagValueMap[tagGroups.aiModes[7]],
        slowCool: tagValueMap[tagGroups.aiModes[8]],
        fastCool: tagValueMap[tagGroups.aiModes[9]],
        aging1: tagValueMap[tagGroups.aiModes[10]],
        aging2: tagValueMap[tagGroups.aiModes[11]],
        aging3: tagValueMap[tagGroups.aiModes[12]],
        endCool: tagValueMap[tagGroups.aiModes[13]],
      };
    } catch (error) {
      lowerGraph.value.push(null);
      upperGraph.value.push(null);
      dataY.value.push(null);
      dataNext.value.push(null);
      graphDataMM.value.push(null);
      graphDataAI.value.push(null);
      graphDataPLC.value.push(null);
      console.error('获取HMI数据失败:', error);
      ElMessage.error('获取数据失败');
    }
  };

  // 当前卷AI模型设定值
  const getCurCoilAISet = async () => {
    try {
      const res = await CAL2150TempCtrlApi.getFurnaceSet();
      warningTableData.value[1].furnaceTemperature12 = res.data.furnace12;
      warningTableData.value[1].furnaceTemperature34 = res.data.furnace34;
      warningTableData.value[1].furnaceTemperature56 = res.data.furnace56;
      warningTableData.value[1].furnaceTemperature78 = res.data.furnace78;
      warningTableData.value[1].furnaceTemperature910 = res.data.furnace910;
      warningTableData.value[1].furnaceTemperature1112 = res.data.furnace1112;
      warningTableData.value[1].furnaceTemperature13 = res.data.furnace13;
      warningTableData.value[1].furnaceTemperature14 = res.data.furnace14;
      warningTableData.value[1].slowCool = res.data.slowCool;
    } catch (error: any) {
      console.error('error:' + error);
    }
  };

  // 目录数据
  const menuData = ref([
    { menuName: 'CAL2150TempCtrlIndex', menuTitle: 'CAL2150连退炉温动态控制模型主页面', menuId: '1' },
    { menuName: 'CAL2150TempCtrlInput', menuTitle: 'CAL2150连退离线计算参数输入画面' },
    { menuName: 'CAL2150TempCtrlList', menuTitle: 'CAL2150连退离线计算参数列表画面' },
    { menuName: 'CAL2150TempCtrlHistory', menuTitle: 'CAL2150连退带钢温度异常分析' },
  ]);
  onBeforeMount(() => {
    useUserStore().setTagNav(menuData.value);
  });

  onMounted(() => {
    fetchData();
    viewportWidth.value = window.innerWidth;
    viewportHeight.value = window.innerHeight;
  });

  onUnmounted(() => {
    dataTimeX.value.clear();
    realTempTimeX.value.clear();
    graphDataAI.value.clear();
    graphDataMM.value.clear();
    graphDataPLC.value.clear();
    dataY.value.clear();
    dataNext.value.clear();
    upperGraph.value.clear();
    lowerGraph.value.clear();
    clearInterval(interval);
  });
</script>
<style lang="less" scoped>
  // ------------------------------  common  ------------------------------------

  .main-container {
    // ---------------------  table ---------------
    :deep(.el-table) {
      background-color: transparent !important;
      --el-table-border: none;
      --el-table-row-hover-bg-color: unset;
      color: white;
    }

    :deep(.el-table th),
    :deep(.el-table tr),
    :deep(.el-table td) {
      background-color: transparent;
    }

    :deep(.el-table__row:nth-child(odd)) {
      background-color: #223671;
    }

    :deep(.el-table__inner-wrapper::before) {
      left: 0;
      bottom: 0;
      width: 100%;
      height: 0;
    }

    // ------------------------------  select  ----------
    :deep(.el-select .el-select__wrapper) {
      background-color: rgba(41, 121, 255, 0.2) !important;
      border: 1px solid #42b4ff !important;
      box-shadow: 0 0 8px rgba(41, 121, 255, 0.5) !important;
      height: 22px !important;
      width: auto !important;
      border-radius: 3px !important;
      transition: border-color 0.2s;
    }
    :deep(.el-select .el-input__inner) {
      height: 20px !important;
      line-height: 20px !important;
      font-size: 14px !important;
      color: #fff !important;
      padding: 0 10px;
      background: transparent !important;
    }
    :deep(.el-select .el-select__caret) {
      font-size: 14px !important;
      color: #42b4ff;
    }
    :deep(.el-select .el-select__placeholder) {
      font-size: 14px !important;
      color: #a0a3a8 !important;
    }
    :deep(.el-select:hover .el-select__selected-item) {
      /* background-color: #42b4ff !important; */
      background-color: transparent !important;
    }

    :deep(.el-select-dropdown) {
      background-color: #142a52 !important;
      border: 1px solid #2a5caa !important;
    }
    :deep(.el-select-dropdown__item) {
      color: #a2cfff !important;
      background-color: #142a52 !important;
    }
    :deep(.el-select-dropdown__item.selected) {
      background-color: #1890ff !important;
      color: #fff !important;
    }
    :deep(.el-select-dropdown__item.hover) {
      background-color: #1e3a6d !important;
      color: #fff !important;
    }
  }

  // ------------------------------   top   ------------------------------------

  .msg-title {
    margin-top: -6vh;
    // left: 39.5vw;
    background-image: -webkit-linear-gradient(left, #0072ff, #00eaff, #01aaff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 2vh;
    font-weight: bolder;
    // width: 10vw;
  }

  .information {
    height: 3.5vh;
    width: 100%;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    color: #fff;
    border: 2px solid #3981d9;
    border-radius: 5px;
    padding: 0 0.2vw;
    display: flex;
    align-items: center;
  }

  .alarm-row-one-line.ellipsis {
    display: inline-block;
    max-width: 520px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    margin-top: 8px;
  }

  .marquee-text {
    display: inline-block;
    white-space: nowrap;
    animation: marquee 18s linear infinite;
    font-size: 15px;
    font-weight: 500;
    padding-left: 10px;
  }
  @keyframes marquee {
    0% {
      transform: translateX(100%);
    }
    100% {
      transform: translateX(-100%);
    }
  }

  .svg-clip-wrapper {
    position: relative;
    width: 580px; /* 只显示的宽度，示例 */
    height: 180px; /* 只显示的高度，示例 */
    overflow: hidden;
    margin: 0 auto;
  }
  .svg-clip-inner {
    position: absolute;
    left: -600px; /* 负值，向左偏移，露出你想要的区域，示例 */
    top: -150px; /* 负值，向上偏移，露出你想要的区域，示例 */
  }
  .svg-clip-inner svg {
    width: 1600px; /* SVG原始宽度，示例 */
    height: 540px; /* SVG原始高度，示例 */
    display: block;
  }

  .top-set-info {
    width: 100%;
    height: 100%;
    margin-top: -3vh;

    .set-info-card-body {
      width: 100%;
      height: 100%;
    }
  }

  .table-cell-class-125 {
    :deep(.el-table) {
      .el-table__cell {
        padding: 2px 2px !important; // 横向纵向同时压缩
        .cell {
          height: auto !important;
          line-height: 1.8;
          font-size: 10px !important;
          transform: scale(0.85); // 字体缩放
          transform-origin: left; // 防止内容偏移
          white-space: nowrap; // 禁止换行
          // overflow: hidden;
          text-overflow: ellipsis; // 溢出显示...
        }
      }
    }
  }

  .table-cell-class-100 {
    :deep(.el-table) {
      .el-table__cell {
        padding: 2px 4px !important; // 横向纵向同时压缩
        .cell {
          height: auto !important;
          line-height: 1.9;
          font-size: 12px !important;
          transform: scale(0.85); // 字体缩放
          transform-origin: left; // 防止内容偏移
          white-space: nowrap; // 禁止换行
          // overflow: hidden;
          text-overflow: ellipsis; // 溢出显示...
        }
      }
    }
  }

  .p-tem-125,
  .dew-point-125 {
    width: 100%;
    color: #fff;
    display: flex;
    flex-wrap: nowrap;
    font-size: 8px;
  }

  .p-tem-100,
  .dew-point-100 {
    width: 100%;
    color: #fff;
    display: flex;
    flex-wrap: nowrap;
    font-size: 11px;
  }

  // ------------------------------   middle   ----------
  .base-info-125 {
    :deep(.el-table) {
      .el-table__cell {
        padding: 2px 4px !important; // 横向纵向同时压缩
        .cell {
          height: auto !important;
          line-height: 2;
          font-size: 12px !important;
          transform: scale(0.85); // 字体缩放
          transform-origin: left; // 防止内容偏移
          white-space: nowrap; // 禁止换行
          text-overflow: ellipsis; // 溢出显示...
        }
      }
    }
  }
</style>
